css3立体式3D盒子

DEMO 不支持低版本浏览器

CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
* {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 100px auto;
            transition: all 2s linear;
            transform-style: preserve-3d;
            /*perspective: 1000px;*/
        }
        .box ul li {
            width: 200px;
            height: 200px;
            position: absolute;
            opacity: .5;
            font-size: 200px;
            text-align: center;
            line-height: 200px;
            color: #fff;
            text-shadow: -1px -1px 0 rgba(255, 255, 255, 1), 1px 1px 2px rgba(0, 0, 0, .8), -3px 10px 31px rgba(0, -120, 0, .4);
            border-radius: 50%;
            border: 50px dashed #FFF;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-name: breathe;
            -webkit-animation-duration: 2700ms;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
        }
        .box ul li:nth-child(1) {
            transform: rotateY(0deg) translateZ(100px);
            background: #069;
            background: linear-gradient(25deg, hotpink, skyblue, purple, orange, yellow);
        }
        .box ul li:nth-child(2) {
            transform: rotateY(180deg) translateZ(100px);
            background: #4dc;
            background: -webkit-linear-gradient(270deg, orange, green);
        }
        .box ul li:nth-child(3) {
            transform: rotateY(90deg) translateZ(100px);
            background: #dca;
            background: linear-gradient(45deg, hotpink, skyblue, purple, orange, yellow);
        }
        .box ul li:nth-child(4) {
            transform: rotateY(-90deg) translateZ(100px);
            background: #fa5;
            background: linear-gradient(25deg, yellow, hotpink, purple, orange, skyblue);
        }
        .box ul li:nth-child(5) {
            transform: rotateX(90deg) translateZ(100px);
            background: #000;
            background: linear-gradient(45deg, skyblue, hotpink, purple, orange, yellow);
        }
        .box ul li:nth-child(6) {
            transform: rotateX(-90deg) translateZ(100px);
            background: #f00;
            background: linear-gradient(65deg, orange, hotpink, purple, skyblue, yellow);
        }
        /*.box:hover{
        transform: rotateY(415deg) rotateX(145deg) rotateZ(100deg);
    }*/
        @keyframes autoRotate {
            /* 从状态1
               如果是希望从元素的默认状态开始改变
               from中内容可以不写
               甚至可以省略
             */
            from {
                transform: rotateY(-1415deg) rotateX(-1145deg) rotateZ(-1100deg);
            }
            /* 到状态2 */
            to {
                transform: rotateY(415deg) rotateX(145deg) rotateZ(100deg);
            }
        }
        /* 定义使用动画的属性 */
        .animation {
            /* 动画名字 */
            animation-name: autoRotate;
            /* 动画的持续时间 */
            animation-duration: 15s;
            /* 动画的 线型 */
            animation-timing-function: linear;
            /* 动画的次数
                如果想要一直播放
                也能给具体的次数
            */
            animation-iteration-count: infinite;
            /* 延迟 开始动画 */
            animation-delay: 1s;
        }
        @-webkit-keyframes breathe {
            0% {
                opacity: .2;
            }
            100% {
                opacity: 1;
            }
        }

HTML

1
2
3
4
5
6
7
8
9
10
<div class="box animation">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
CSS3